<template>
    <div class="common-layout">
        <el-main>
            <copy-stocks-to-clipboard :data="state.data" />
            <el-table :data="state.data" height="900" 
            @sort-change="sortChange"
            :cell-class-name="tableCellClassName"
            @cell-click="cellClick"
            :default-sort="state.sort"
            style="width: 100%">
                <el-table-column prop="date" label="date" width="210" sortable/>
                <el-table-column prop="stock" label="股票" width="200"/>
                <el-table-column prop="close" label="close" width="100"/>
                <el-table-column prop="pct" label="pct" width="100"/>
                <el-table-column prop="nextPct" label="nextPct" width="100"/>
                <el-table-column prop="gt60d" label="gt60d" width="100"/>
                <el-table-column prop="gt100d" label="gt100d" width="100"/>
                <el-table-column prop="gt300d" label="gt300d" width="100"/>
                <el-table-column prop="duration" label="duration" width="100" sortable />
                <el-table-column prop="d10max" label="d10max" width="100"/>
                <el-table-column prop="d10min" label="d10min" width="100"/>
                <el-table-column prop="type" label="type" width="100"/>
            </el-table>
        </el-main>
    </div>
</template>

<script setup>
import { reactive, watch, ref } from 'vue';
import { getDailyGB300, getDailyGB60 } from '../../service/dailyGB';
import CopyStocksToClipboard from '../CopyStocksToClipboard.vue';
import { useRouteQuery } from '../../utils/useRoute';

const base = "GBStaUp"
const sortPropKey = base + "SortProp"
const sortOrderKey = base + "SortOrder"
const selectedKey = base + "Selected"

// 网址传参
const state = reactive({
    data: [],
    rawData: [],
    operationSelected: "",
    operationSelectedStock: "",
    sort: { 
        prop: sessionStorage.getItem(sortPropKey) || '' , 
        order: sessionStorage.getItem(sortOrderKey) || '' 
    }
})

let stock = useRouteQuery("stock", "")
if (stock != "") {
    state.operationSelectedStock = stock
}

const loadData = () => {
    getDailyGB300(state.operationSelectedStock).then( res => {
        state.rawData = res.data
        state.data = res.data
    })
}

loadData()

const tableCellClassName = ({row, column, rowIndex, columnIndex}) => {
    let columnProperty = column.property
    let val = row[columnProperty]

    if (["pct","nextPct","gt60d","gt100d","gt300d"].includes(columnProperty)) {
        if (val < 0) {
            return 'lt0-cell'
        }

    }
    return ''
}

const cellClick = (row, column, cell, event) => {
    let columnProperty = column.property
    let val = row[columnProperty]

    if (columnProperty == 'stock') {
        // 点相同的股票名则取消选择
        if (state.operationSelectedStock != "" && state.operationSelectedStock == val) {
            state.operationSelectedStock = ""
        } else {
            state.operationSelectedStock = val
        }
        // 重新请求数据
        loadData()
    }

    if (["date","gt60d","duration"].includes(columnProperty)) {
        let val = row[columnProperty]
        if (state.operationSelected != "" && state.operationSelected == val) {
            state.operationSelected = ""
            state.data = state.rawData
        } else {
            state.operationSelected = val
            if (["gt60d","duration"].includes(columnProperty)) {
                if (val >= 0) {
                    state.data = state.rawData.filter(item => item[columnProperty] >= 0)
                } else {
                    state.data = state.rawData.filter(item => item[columnProperty] < 0)
                }
            } else {
                state.data = state.rawData.filter(item => item[columnProperty] == val)
            }
        }
    }
}

const sortChange = (column, prop, order) => {
    sessionStorage.setItem(sortPropKey, column.prop)
    sessionStorage.setItem(sortOrderKey, column.order)
}
</script>

<style>
</style>